{Day10} 小公主訂單網頁嘗試集＿第十集＿區塊（div)介紹

2022 iThome 鐵人賽

DAY 10

Modern Web

訂單網頁嘗試集系列第 10 篇

14th鐵人賽網頁設計網頁教學

icetong

2022-09-25 23:08:54

410 瀏覽

分享至

今天是歡樂星期天，來講個概念性的東西吧！鐵人賽也過了1/3了呢！別放棄，一起堅持下去吧！！

覺得昨天講的相對位置和絕對位置，如果沒細講區塊的概念，會容易混亂和混淆！就來深度認識下吧

區塊元素(div)

div是division這個單字取前面三個字母來表示，是區分的意思，功能主要可當成框架，像是容器般的方便給 CSS 做樣式排版或使JavaScript互動操作更為便利，若有某幾個段落文字想要有特定的css設計，這時就需要框選出一個範圍，div便可以完成這項任務。

我將標題設定為一個區塊，並在css個別將不同區塊的段落分別設定不同的設計！

div應用程式碼：

<!DOCTYPE html>
<html>
    <head>
       <title>little_princess_web</title>
       <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    </head>
    <body>
      <link rel="stylesheet" href="day10.css">

<div class="title">
<h1>歡迎光臨小公主網頁嘗試集！</h1>
<h2>今天要介紹div的用法</h2>

</div>

<div class="photo">
   <img src="./photo/IMG_4003.jpg" alt="沒眼福看到凌晨四點的小公主">

</div>
</html>

css程式碼：

.title{
    height: 100px;
    text-align:center;
  }


.photo{
    width: 100px;
    margin-right: 10%;
    

}

img {
    width: 450px;
    border-radius: 25%;
    margin-right: 10%;
}

網頁呈現：

以上希望大家都有更了解一點，因為發完昨天的，好像什麼都沒講一樣（哭）